<template>
  <div id="authentication_container">
    <div class="authentication_container">
      <Return title="实名认证"></Return>
      <div class="card_wrap">
        <div class="title-header">
          <span
            :class="{ tent: true, 'active-tent': activeName === '身份认证' }"
            @click="tentChange('身份认证')"
            >身份认证</span
          >
          <span
            :class="{ tent: true, 'active-tent': activeName === '驾驶认证' }"
            @click="tentChange('驾驶认证')"
            >驾驶认证</span
          >
        </div>
        <!-- 身份认证 -->
        <div class="card_item" v-if="activeName === '身份认证' && idTentInfo.card_id">
          <div>
            <h4 class="card_item_title">
              <span class="name t">姓名</span> {{ idTentInfo.real_name }}
            </h4>
            <h4 class="card_item_number">
              <span class="id t">公民身份号码</span> {{ idTentInfo.card_id }}
            </h4>
          </div>
        </div>
        <!-- 驾驶认证 -->
        <div class="card_item" :style="{background: `url(${require('../../assets/images/di.png')})`}" v-if="activeName === '驾驶认证' && idTentInfo.drivingLicence_id">
          <div>
            <h4 class="card_item_title" style="color: #fff">{{ idTentInfo.real_name }}</h4>
            <h4 class="card_item_number" style="color: #fff;margin-top: 50px">{{ idTentInfo.drivingLicence_id }}</h4>
          </div>
        </div>
        <div class="card_add" v-if="!idTentInfo.card_id" @click="goIdTent">身份认证</div>
        <div class="card_add" v-if="!idTentInfo.drivingLicence_id" @click="goDriveTent">驾驶认证</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  name: "Authentication",
  data() {
    return {
      id:
        this.$store.state.userAbout.user_id ||
        JSON.parse(localStorage.getItem("userInfo")).id,
      activeName: "身份认证",
    };
  },
  mounted() {
    this.GetIdTentInfo(this.id);
  },
  methods: {
    goIdTent() {
      this.$router.push({ name: "Tent", query: { type: "身份认证" } });
    },
    goDriveTent() {
      this.$router.push({ name: "Tent", query: { type: "驾驶认证" } });
    },
    // 切换
    tentChange(type) {
      this.activeName = type;
    },
    ...mapActions("userAbout", ["GetIdTentInfo"]),
  },
  computed: {
    ...mapState("userAbout", ["idTentInfo"]),
  },
};
</script>

<style lang="scss" scoped>
#authentication_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .authentication_container {
    width: 348px;
    margin: auto;
    .card_wrap {
      .title-header {
        display: flex;
        .tent {
          display: block;
          padding-bottom: 20px;
          margin: auto;
          text-align: center;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
          box-sizing: border-box;
          border-bottom: 2px solid #34393f;
        }
        .active-tent {
          border-bottom: 2px solid #00a3ff;
        }
      }
      .card_item {
        margin-top: 20px;
        width: 100%;
        height: 191px;
        margin-bottom: 24px;
        background: url("../../assets/images/idtent.png");
        div {
          width: 100%;
          height: 100%;
          padding-top: 27px;
          padding-left: 30px;
          color: #fff;
          .t {
            font-size: 14px;
            color: #00a3ff;
          }
          .card_item_title {
            font-size: 18px;
            color: #000;
          }
          .card_item_number {
            font-size: 16px;
            margin-top: 70px;
            color: #000;
          }
        }
      }
      .card_add {
        width: 100%;
        height: 40px;
        background-color: #32373d;
        border: 1px dashed #000;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        opacity: 0.6;
        margin-bottom: 20px;
        &:hover {
          color: #fff;
          opacity: 0.9;
          cursor: pointer;
        }
      }
    }
  }
}
</style>